<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{
				list-style: none;
			}
			.imgs{
				width: 590px;
				height: 470px;
				overflow: hidden;
			}
            .dots{
            	width: 164px;
            	position: absolute;
            	left: 250px;
            	top: 450px;
            	z-index: 999;
            }
            .dot{
            	width: 10px;
            	height: 10px;
            	border: 2px solid #fff;
            	border-radius: 10px;
            	display: inline-block;
            }			
		</style>
	</head>
	<body>
		<div class="ad">
			<ul id="imgs" class="imgs">
				<li class="img_li"><img src="https://imgcps.jd.com/ling4/7040368/5aSn5Yib55Sf5rS76aaG/54Ot6ZSA54iG5qy-5aW96LSn6LSt/p-5bd8253082acdd181d02fa5d/d959da62/cr/s/q.jpg" alt="" /></li>
				<li class="img_li"><img src="https://imgcps.jd.com/img-cubic/creative_server_cia/v1/FocusFullshop/CkJqZnMvdDEvMTY5NTA4LzM1LzM3MTAvNjgyOTcvNjAwOTM1MTFFMmEyMjUxODYvNzRlNGMyMTExOTM0ZGQ5NC5qcGcSCjk5OS10eV8wXzEwATjui3o/cr/s/q.jpg" alt="" /></li>
				<li class="img_li"><img src="https://imgcps.jd.com/img-cubic/creative_server_cia/v1/FocusFullshop/CkJqZnMvdDEvMTcxNTU3LzMvMTYxMjkvOTU1NTMvNjA2Nzc5ODBFZjYxNzc4ZDgvYjU2NjNkMzAzODljZmNkZS5qcGcSCjk5OS10eV8wXzEwATjui3o/cr/s/q.jpg" alt="" /></li>
				<li class="img_li"><img src="https://imgcps.jd.com/ling4/2922989/6LaF5YC85aW954mp5oOg5LiN5YGc/5aW96Iy25aW95rC05aW955Sf5rS7/p-5bd8253082acdd181d02fa75/49596926/cr/s/q.jpg" alt="" /></li>
				<li class="img_li"><img src="https://imgcps.jd.com/img-cubic/creative_server_cia/v1/FocusFullshop/CkNqZnMvdDEvMTIzNTk1LzM4LzE5ODg1LzU5MjA5LzVmYmQwNTlmRTQwNzc2ZGQ5L2UxYzM0ZDFiODcxMmQ3YzMuanBnEgo5OTktdHlfMF8xMAE47ot6/cr/s/q.jpg" alt="" /></li>
				<li class="img_li"><img src="https://imgcps.jd.com/ling4/100006061651/576O5aaG5aW96LSn6LSt/5q-P5pel6ZmQ5pe25oqi6LSt/p-5bd8253082acdd181d02f9fa/7844aab7/cr/s/q.jpg" alt="" /></li>
			</ul>
			<ul class="dots">
				<li class="dot" style="background-color: #fff;"></li>
				<li class="dot"></li>
				<li class="dot"></li>
				<li class="dot"></li>
				<li class="dot"></li>
				<li class="dot"></li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
        function change(n){
        	var img_lis=document.querySelectorAll('.img_li');
        	var dot_lis=document.querySelectorAll('.dot');
        	for(var i=0;i<img_lis.length;i++){
        		//将所有图片隐藏，li背景色去除
        		img_lis[i].style.display='none';
        		dot_lis[i].style.backgroundColor='';
        	}
        	//根据下标参数n，将指定的图片显示
        	img_lis[n].style.display='block';
        	//根据下标参数n，将指定的li背景色加上
        	dot_lis[n].style.backgroundColor='#fff';
        }
        
        //自动切换
        var num=0;
//      var set=setInterval(function(){
//      	var img_lis=document.querySelectorAll('.img_li');
//      	num++;
//      	if(num==img_lis.length){
//      		num=0;
//      	}
//      	change(num);
//      },1000);
        var set;
        function setTime(){
        	set=setInterval(function(){
        	var img_lis=document.querySelectorAll('.img_li');
        	num++;
        	if(num==img_lis.length){
        		num=0;
        	}
        	change(num);
        },1000);
        };
        setTime();
        
        //鼠标悬浮切换图片
        var dot_lis=document.querySelectorAll('.dot');
        for(var i=0;i<dot_lis.length;i++){
        	(function(i){
        		dot_lis[i].onmouseover=function(){
        		   //放上li停止计时器自动切换图片
        		   clearInterval(set);
        		   change(i);
        		   num=i;
        	   }
        		//离开li继续开启计时器播放轮播图
        		dot_lis[i].onmouseout=function(){
        			setTime();	
        		}
        	})(i);
        }
        
        
        
	</script>
</html>
